<template>
  <div class="self_adaption">
    <div class="g-container">
      <div class="other">
        <p class="main_text">意见反馈</p>
      </div>
      <!-- 搜索 -->
      <div class="g-search" ref="searchBox">
        <!-- 时间选择区域 -->
        <div class="demo-date-picker">
          <div class="block">
            <span class="demonstration">提交时间：</span>
            <el-date-picker
              v-model="searchValue.startAt"
              type="date"
              placeholder="开始时间"
              @change="startTime"
              :clearable="false"
              :default-time="defaultTime(0, 0, 0)" />
            <span class="demonstration" style="display: inline-block; font-size: 12px; color: #898989; margin: 20px"
              >至</span
            >
            <el-date-picker
              v-model="searchValue.endAt"
              type="date"
              placeholder="结束时间"
              @change="endTime"
              :clearable="false"
              :default-time="defaultTime1(23, 59, 59)" />

            &emsp;
            <el-radio-group v-model="radio" class="ml-4" @change="radioSelect">
              <el-radio label="1" size="large">今天</el-radio>
              <el-radio label="2" size="large">昨天</el-radio>
              <el-radio label="3" size="large">近三天</el-radio>
              <el-radio label="4" size="large">近一周</el-radio>
              <el-radio label="5" size="large">近一个月</el-radio>
              <el-radio label="6" size="large">近三个月</el-radio>
              <el-radio label="7" size="large">近一年</el-radio>
            </el-radio-group>
          </div>
        </div>
        <!-- 信息区域 -->
        <div class="all_select">
          <!-- 投诉ID -->
          <div class="input_valye">
            <span class="demonstration">用户ID：</span>
            <input
              type="number"
              class="input"
              placeholder="请输入用户ID"
              v-model="searchValue.userId"
              style="width: 200px"
              @keyup.enter="search" />
          </div>
          <!-- 处理状态 -->
          <div class="input_valye">
            <span class="demonstration">反馈类型：</span>
            <el-select
              v-model="searchValue.tag"
              class="m-2"
              placeholder="请选择反馈类型"
              style="width: 200px"
              @change="search">
              <el-option v-for="item in riseType_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <!-- 底部按钮区域 -->
        <div class="bottom_btn">
          <el-button class="solid" @click="search">查询</el-button>
          <el-button class="hollow" @click="reset">重置</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table p20">
        <!-- 表格区域 -->
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            'text-align': 'center',
            background: '#F2F7FC !important',
          }"
          :show-overflow-tooltip="true"
          border>
          <el-table-column type="selection" width="40" />
          <el-table-column prop="id" label="编号" align="center" />
          <el-table-column prop="userId" label="用户ID" width="180" align="center">
            <template #default="item">
              <el-text tag="span" style="cursor: pointer" @click="Look(item.row)">{{ item.row.userId }}</el-text>
            </template>
          </el-table-column>
          <el-table-column prop="username" label="用户名" width="100" align="center" />
          <el-table-column prop="tag" label="反馈类型" align="center" />
          <el-table-column prop="description" label="反馈内容" align="center" />
          <el-table-column prop="contact" label="联系方式" align="center" />
          <el-table-column prop="createdAt" label="提交时间" align="center" />
          <el-table-column label="操作" width="200" class="operation" :show-overflow-tooltip="false">
            <template #default="item">
              <div class="table_btn">
                <el-button size="small" class="none" @click="Look(item.row)">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <smartPager
          v-model:current-page="searchValue.page"
          v-model:page-size="searchValue.rows"
          :total="Number(total)"
          @change="pageChange" />
      </div>
      <!-- 查看意见 -->
      <div class="plateform" v-if="mask">
        <div class="title1">
          <div class="title_mes">
            <el-icon size="20" color="#fff"> <Edit /> </el-icon>&nbsp;添加模板
          </div>
          <span class="close" @click="maskBtn1">✖</span>
        </div>
        <div class="content1">
          <div class="tab_ul">
            <div class="tab_li">
              <div class="tab_tit" style="border-top: 1px solid #e4e7ed">用户ID</div>
              <div class="tab_content" style="border-top: 1px solid #e4e7ed">&emsp;{{ FeedMes.userId }}</div>
            </div>
            <div class="tab_li">
              <div class="tab_tit">用户名</div>
              <div class="tab_content">&emsp;{{ FeedMes.username }}</div>
            </div>
            <div class="tab_li">
              <div class="tab_tit">反馈类型</div>
              <div class="tab_content">&emsp;{{ FeedMes.tag }}</div>
            </div>
            <div class="tab_li">
              <div class="tab_tit">反馈时间</div>
              <div class="tab_content">&emsp;{{ FeedMes.createdAt }}</div>
            </div>
            <div class="tab_li">
              <div class="tab_tit" style="height: 150px; line-height: 150px">反馈说明</div>
              <div class="tab_content especial" style="height: 150px; overflow-y: scroll; padding: 10px">
                &emsp;{{ FeedMes.description }}
              </div>
            </div>
            <div class="tab_li">
              <div class="tab_tit">联系方式</div>
              <div class="tab_content">&emsp;{{ FeedMes.contact }}</div>
            </div>
          </div>
        </div>
        <div class="btn_center">
          <el-button class="hollow" @click="maskBtn1">取消</el-button>
          <el-button class="solid" @click="plateformSure">确定</el-button>
        </div>
      </div>
      <!-- 遮罩层 -->
      <div id="mask1" v-if="mask" @click="maskBtn1"></div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {RequestfFeedBackGetlistlimit, RequestComplaintGetDetail} from '@/api/path/index.js';
import {Edit} from '@element-plus/icons-vue';
const uploadShow = ref(false); //上传发票显示
const mask = ref(false); //遮罩层显示
import moment from 'moment';
const radio = ref(''); //单选按钮
const showInvoice = ref(false); //控制组件显示
const total = ref(0); //发票总数
const tableData = ref([]); //发票数组
const defaultTime = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
const defaultTime1 = (H: any, M: any, S: any) => {
  var now = new Date();
  now.setHours(H);
  now.setMinutes(M);
  now.setSeconds(S);
  return now;
};
onMounted(() => {
  requestfFeedBackGetlistlimit();
  handleResize();
  window.addEventListener('resize', handleResize);
});
const searchBox = ref();
const tablelistHeight = ref();
const handleResize = () => {
  const searchBoxHeight = searchBox.value.clientHeight;
  tablelistHeight.value = 110 + searchBoxHeight + 'px';
  console.log('Search Box height11111111111111111111111111111:', searchBoxHeight);
};

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleResize);
});

/**
 * 处理类型
 */
const riseType_options = [
  {
    value: '异常反馈',
    label: '异常反馈',
  },
  {
    value: 'bug反馈',
    label: 'bug反馈',
  },
  {
    value: '功能建议',
    label: '功能建议',
  },
];
/**
 * 获取意见反馈
 */
const requestfFeedBackGetlistlimit = async () => {
  const a = await RequestfFeedBackGetlistlimit(searchValue.value);
  console.log('获取成功获取成功获取成功获取成功获取成功获取成功', a.resultObj);
  tableData.value = a.resultObj.list;
  total.value = a.resultObj.count;
};
/**
 * 分页
 */
const pageChange = async (val: number) => {
  requestfFeedBackGetlistlimit();
};
/**
 * 时间范围单选按钮
 */
const radioSelect = () => {
  searchValue.value.startAt = '';
  searchValue.value.endAt = '';
  var now = new Date();
  now.setHours(0);
  now.setMinutes(0);
  now.setSeconds(0);
  var now1 = new Date();
  now1.setHours(23);
  now1.setMinutes(59);
  now1.setSeconds(59);
  if (radio.value === '1') {
    searchValue.value.startAt = moment(now).format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '2') {
    searchValue.value.startAt = moment(now).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '3') {
    searchValue.value.startAt = moment(now).subtract(3, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '4') {
    searchValue.value.startAt = moment(now).subtract(7, 'days').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '5') {
    searchValue.value.startAt = moment(now).subtract(1, 'months').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else if (radio.value === '6') {
    searchValue.value.startAt = moment(now).subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  } else {
    searchValue.value.startAt = moment(now).subtract(1, 'years').format('YYYY-MM-DD HH:mm:ss');
    searchValue.value.endAt = moment(now1).format('YYYY-MM-DD HH:mm:ss');
  }
  search()
};

/**
 * 搜索值
 */
const searchValue = ref({
  userId: '',
  startAt: '',
  endAt: '',
  tag: '',
  page: 1,
  rows: 10,
});
/**
 * 点击重置
 */
const reset = () => {
  searchValue.value = {
    userId: '',
    startAt: '',
    endAt: '',
    tag: '',
    page: 1,
    rows: 10,
  };
  searchValue.value.page = 1;
  radio.value = '';
  requestfFeedBackGetlistlimit();
};
// 开始时间
const startTime = () => {
  radio.value = '';
  searchValue.value.startAt.setHours(0);
  searchValue.value.startAt.setMinutes(0);
  searchValue.value.startAt.setSeconds(0);
  searchValue.value.startAt = moment(searchValue.value.startAt).format('yyyy-MM-DD HH:mm:ss');
  search();
};
// 结束时间
const endTime = () => {
  radio.value = '';
  searchValue.value.endAt.setHours(23);
  searchValue.value.endAt.setMinutes(59);
  searchValue.value.endAt.setSeconds(59);
  searchValue.value.endAt = moment(searchValue.value.endAt).format('yyyy-MM-DD HH:mm:ss');
  search();
};
/**
 * 搜索点击事件
 */
const search = async () => {
  if (moment(searchValue.value.startAt).diff(moment().format('YYYY-MM-DD HH:mm:ss')) >= 0) {
    ElMessage.error('开始时间不能晚于当前日期');
    searchValue.value.startAt = '';
  } else {
    if (searchValue.value.startAt !== '' && searchValue.value.endAt !== '') {
      if (moment(searchValue.value.startAt).diff(moment(searchValue.value.endAt)) <= 0) {
        searchValue.value.page = 1;
        requestfFeedBackGetlistlimit();
      } else {
        ElMessage.error('结束时间不能早于开始时间');
        searchValue.value.endAt = '';
      }
    } else {
      searchValue.value.page = 1;
      requestfFeedBackGetlistlimit();
    }
  }
};
const FeedMes = ref({
  id: '',
  userId: '',
  tag: '',
  images: '',
  description: '',
  createdAt: '',
  contact: '',
  username: '',
  note: '',
});
/**
 * 点击查看
 */
const Look = async (item: any) => {
  mask.value = true;
  FeedMes.value = item;
};

/**
 * 遮罩层数据
 */
const maskBtn1 = () => {
  mask.value = false;
  showInvoice.value = false;
  uploadShow.value = false;
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/plateform/Article/Content.css';
@import '@/assets/css/plateform/Shop/GoodsManage.css';

.plateform {
  width: 70%;
  height: 75%;
  position: absolute;
  background: #fff;
  z-index: 9999;
  top: 7.5%;
  left: 15%;

  .content1 {
    height: calc(100% - 140px);
    overflow-y: scroll;
  }

  .mes {
    margin-top: 20px;
    display: flex;
    align-items: center;

    .text {
      display: inline-block;
      width: 60px;
      font-size: 14px;
      color: #6c6c6c;
    }
  }
}

.tab_ul {
  width: 90%;
  margin: 40px auto;

  .tab_li {
    display: flex;
    align-items: center;

    .tab_tit {
      width: 100px;
      height: 40px;
      font-size: 14px;
      color: #606266;
      background: #f5f7fa;
      border: 1px solid #e4e7ed;
      text-align: center;
      line-height: 40px;
      border-top: 0;
    }

    .especial::-webkit-scrollbar {
      display: none;
    }

    .tab_content {
      flex: 1;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      color: #3d3d3d;
      border: 1px solid #e4e7ed;
      border-top: 0;
    }
  }
}

.el-table .check_table {
  background: pink !important;
}

.table {
  height: calc(100% - v-bind(tablelistHeight)) !important;
}

::v-deep .el-table--fit {
  height: calc(100% - 60px) !important;
}

.table :deep(.el-table__cell) {
  text-align: center;
}

.el-form-item :deep(.el-input-group__prepend) {
  width: 10px;
  background-color: #116cf8;
  color: #fff;
}

.el-table .warning-row {
  background: #f2f7fc;
}
</style>
